<template>
    <div id="lottie" class="lottie" :style="`--lottie-size: ${props.size}`" />
</template>

<script setup lang="ts">
import lottie from "lottie-web";
import { iLottieProps } from "./index.props.ts";
import lottieJSON from "../lotties";

const props = defineProps(iLottieProps);

/**
 * @summary 创建 lottie 的容器
 * */
const createLottieHTMLElement = (id: string) => {
    const { autoplay, loop } = props;
    setTimeout(() => {
        const container: HTMLElement | null = document.getElementById(id);

        lottie.loadAnimation({
            container,
            renderer: "svg",
            autoplay,
            loop,
            path: lottieJSON.NOT_FOUND_ERR
        });
    }, 50);
};

onMounted(() => createLottieHTMLElement("lottie"));
</script>
